<template>
  <RouterLink 
    :to="{ name: 'MovieDetail', params: { id: movie.id }}"
    class="block group"
  >
    <div class="relative">
      <div class="w-full h-[270px] overflow-hidden">
        <img 
          :src="movie.image_url || '@/assets/images/nopicture.jpg'" 
          :alt="movie.movie_name"
          class="rounded w-full h-full object-cover"
          referrerpolicy="no-referrer"
        >
      </div>
      
      <!-- 置顶标签 -->
      <div 
        v-if="movie.is_top" 
        class="absolute top-0 left-0 bg-purple-600 px-2 text-sm rounded"
      >
        置顶
      </div>
      
      <!-- 清晰度标签 -->
      <div 
        v-if="movie.quality"
        class="absolute bottom-0 right-0 bg-blue-500 px-2 text-sm rounded"
      >
        {{ getQualityText(movie.quality) }}
      </div>
    </div>
    
    <p class="mt-2 text-sm truncate">
      {{ movie.movie_name }}
      <span v-if="movie.release_year">({{ movie.release_year }})</span>
    </p>
  </RouterLink>
</template>

<script setup>
defineProps({
  movie: {
    type: Object,
    required: true
  }
})

const getQualityText = (quality) => {
  switch(quality) {
    case 1: return '720p'
    case 2:
    case 0: return '1080p'
    case 3: return '4k'
    default: return ''
  }
}
</script> 